<template>
  <view>
    <view class="stick-box">
      <view class="top-card">
        <u-navbar
          bgColor="transparent"
          auto-back
          title="商家中心"
          placeholder
        ></u-navbar>
        <view class="p-12">
          <view class="flex mt-12 items-center justify-between">
            <view class="flex">
              <u-image
                radius="12rpx"
                width="100rpx"
                height="100rpx"
                v-bind:src="tenantdata.logoUrl"
              ></u-image>
              <view class="pl-10">
                <view class="text-14 text-bold">{{
                  tenantdata.merchantName
                }}</view>
                <view class="pt-10 flex text-10 color-gray">
                  <u-rate
                    :count="5"
                    :value="4.8"
                    size="28rpx"
                    gutter="4rpx"
                    allowHalf
                  ></u-rate>
                  <text class="text-red ml-4">4.8</text>
                  <text class="ml-4">| 2789关注</text>
                  <text class="ml-4">| {{ totalgoods }}件商品</text>
                </view>
              </view>
            </view>
            <view>
              <u-button
                type="primary"
                text="+ 关注"
                shape="circle"
                :custom-style="{ height: '32px' }"
              ></u-button>
            </view>
          </view>
          <view class="ellipsis-2 mt-12 text-12 color-gray">
            {{ tenantdata.description }}
          </view>
        </view>
      </view>
      <view class="p-12">
        <u-tabs
          :list="tabList"
          line-color="#8ac7b0"
          :scrollable="false"
          :activeStyle="{
            color: '#8ac7b0',
            transform: 'scale(1.05)',
          }"
          :inactiveStyle="{
            color: '#666',
            transform: 'scale(1)',
          }"
          itemStyle="height: 44px;"
          :current="current"
          @change="change"
        >
        </u-tabs>
        <!--        <view class="py-12">-->
        <!--          <u-tabs-->
        <!--            :list="itemTabList"-->
        <!--            line-color="transparent"-->
        <!--            line-height="0"-->
        <!--            :activeStyle="{-->
        <!--              border: '1rpx solid #6acaaf',-->
        <!--              borderRadius: '100rpx',-->
        <!--              fontSize: '24rpx',-->
        <!--              padding: '4rpx 16rpx',-->
        <!--              color: '#8ac7b0',-->
        <!--            }"-->
        <!--            :inactiveStyle="{-->
        <!--              background: '#9e9e9e1c',-->
        <!--              borderRadius: '100rpx',-->
        <!--              padding: '4rpx 16rpx',-->
        <!--              color: '#666',-->
        <!--              fontSize: '24rpx',-->
        <!--            }"-->
        <!--            :itemStyle="{ height: 'fit-content', padding: '0 12rpx' }"-->
        <!--          >-->
        <!--          </u-tabs>-->
        <!--        </view>-->
      </view>
    </view>
    <z-paging
      ref="paging"
      v-model="goodsList"
      @query="queryList"
      scrollable
      :height="`calc(100vh - ${topHeight}px)`"
      :fixed="false"
      :auto-hide-loading-after-first-loaded="false"
      :use-page-scroll="false"
    >
      <template #loading>
        <view class="w-full h-full flex items-center justify-center">
          <u-loading-icon mode="circle" color="#86bf9e"></u-loading-icon>
        </view>
      </template>
      <WaterfallGoodsList
        :dataList="goodsList"
        v-if="current === 0"
      ></WaterfallGoodsList>
      <VideoList v-if="current === 1" :dataList="goodsList"></VideoList>
      <img-list v-if="current === 3" :dataList="goodsList"></img-list>
    </z-paging>
    <!--    <scroll-view-->
    <!--      scroll-y-->
    <!--      :style="{ height: `calc(100vh - ${topHeight}px)` }"-->
    <!--      @scrolltolower="loadMore"-->
    <!--    >-->
    <!--      <WaterfallGoodsList-->
    <!--        :dataList="goodsList"-->
    <!--        v-if="current === 0"-->
    <!--      ></WaterfallGoodsList>-->

    <!--    </scroll-view>-->
  </view>
</template>

<script>
import WaterfallGoodsList from "@/components/waterfull-goods-list/waterfall-goods-list.vue";
import VideoList from "@/subpages/businessCenter/video-list/index.vue";
import ImgList from "@/subpages/businessCenter/img-list/index.vue";
import { fetchGoodsPageList, fetchMerchantInfo } from "@/services/api";
export default {
  components: {
    WaterfallGoodsList,
    VideoList,
    ImgList,
  },
  data() {
    return {
      tabList: [
        {
          name: "商品",
        },
        {
          name: "商家号",
        },
        {
          name: "好物圈",
        },
      ],
      itemTabList: [
        {
          name: "销量",
        },
        {
          name: "价格",
        },
        {
          name: "新品",
        },
        {
          name: "惊艳度",
        },
      ],
      current: 0,
      goodsList: [],
      topHeight: 200,

      p: 1,

      //传递得商家信息
      tenantdata: null,
      totalgoods: 0,
    };
  },
  methods: {
    change({ index }) {
      this.current = index;
      this.$refs.paging.reload();
    },
    getTopHeight() {
      this.$uGetRect(".stick-box").then((res) => {
        console.log(res);
        this.topHeight = res.height;
      });
    },
    //获取商户信息
    async loadMore() {},
    //获取商户商品
    async queryList(pageNum, pageSize) {
      const { data, error, pagination } = await fetchGoodsPageList({
        pagination: {
          pageNum,
          pageSize,
        },
        merchantNo: this.tenantdata.merchantNo,
      });
      if (error) {
        this.$refs.paging.complete(false);
      } else {
        this.$refs.paging.complete(data);
      }
    },
  },
  mounted() {
    this.loadMore();
    this.getTopHeight();
    // this.getGoodsList();
  },
  onLoad(options) {
    console.log("options", options);
    if (options.query.data == null) {
      let str = this.$route.params.data;
      let dats = JSON.parse(str);
      this.tenantdata = dats;
    } else {
      console.log("========2233");
      let str = options.query.data;
      let dats = JSON.parse(str);
      this.tenantdata = dats;
    }
  },
};
</script>

<style lang="scss" scoped>
.top-card {
  min-height: 400rpx;
  background: linear-gradient(to bottom right, #effcf5, #def1f7);
}
</style>
